<template>
  <div class="div-style">
    <el-card
      v-show="isshow"
      class="card-style"
      v-for="(room, index) in roomList"
      :key="room.id"
    >
      <div @click="goSeach(room)">
        <div>房间编号:{{ room.room }}</div>
        <div v-show="room.state == 0">
          未入住
          <div>
            <div>房价:{{ room.money }}</div>
            <div>折扣:{{ room.discount }}折</div>
            <div>最大人数:{{ room.roomParams.number }}</div>
            <div>{{ room.roomParams.remark }}</div>
          </div>
        </div>
        <div v-show="room.state == 1">已入住</div>
      </div>
    </el-card>
    <el-card v-show="!isshow" class="box-card">
      <h2>姓名：{{ this.nickname }}</h2>
      <p>身份证：{{ this.idcard }}</p>
      <p>入住房间：{{ this.fangjian }}</p>
      <p>住房时间：{{ this.stime }}</p>
      <p>退房时间：{{ this.etime }}</p>
      <el-button @click="tuifang"> 退房结算 </el-button>
    </el-card>

    <el-dialog
      title="提示"
      :visible.sync="dialogVisible"
      width="30%"
      :before-close="handleClose"
    >
      <span>这是一段信息</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  naem: "room",
  data() {
    return {
      dialogVisible:false,
      isshow: true,
      roomList: [],
      id: "",
      nickname: "",
      ruzhu: "",
      fangjian: "",
      idcard: "",
      stime: "",
      etime: "",
    };
  },
  mounted() {
    this.findRoomAll();
  },
  methods: {
    async tuifang() {
      console.log(this.id);
      let result = this.$API.table.reqtuifang(this.id);
      this.isshow=true;
      this.findRoomAll();
      if (result.code == 20000) {
        // this.dialogVisible = true;
        
      }
    },
    async findRoomAll() {
      let result = await this.$API.room.reqfindAllTable();
      if (result.code == 20000) {
        this.roomList = result.data;
      }
    },
    goSeach(room) {
      if (room.state == 1) {
        // let location = { name: "Geren", query: { id: room.id } };
        this.id = room.id;
        this.idcard = room.idCard;
        this.nickname = room.name;
        this.fangjian = room.room;
        this.stime = room.stime;
        this.etime = room.etime;
        console.log(room);
        this.isshow = false;
        // this.$router.push(location);
      }
    },
  },
};
</script>
<style scoped>
.divBox {
  width: 200px;
  height: 300px;
  margin: 0 auto;
  background-color: pink;
  border: 1px;
}
.card-style {
  /* display:flex;
  align-items:center; */
  width: 170px;
  height: 160px;
  margin: 20px;
}
.div-style {
  display: flex;
  flex-wrap: wrap;
}
</style>